<div class="m-login__signin" [@routerTransition]>
    <div class="m-login__head">
        <h3 class="m-login__title">
            {{ 'LogIn' | localize }}
        </h3>
    </div>
    <form #loginForm="ngForm" class="m-login__form m-form login-form" method="post" novalidate (ngSubmit)="login()">

        <div class="form-group m-form__group">
            <input #userNameOrEmailAddressInput="ngModel" [(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress" autoFocus class="form-control m-input" type="text" autocomplete="off" placeholder="{{'UserNameOrEmail' | localize}} *" name="userNameOrEmailAddress" required />
            <validation-messages [formCtrl]="userNameOrEmailAddressInput"></validation-messages>
        </div>

        <div class="form-group m-form__group">
            <input #passwordInput="ngModel" [(ngModel)]="loginService.authenticateModel.password" class="form-control m-input" type="password" autocomplete="off" placeholder="{{'Password' | localize}} *" name="password" required maxlength="32" />
            <validation-messages [formCtrl]="passwordInput"></validation-messages>
        </div>

        <div class="row m-login__form-sub">
            <div class="col m--align-left">
                <label class="m-checkbox m-checkbox--primary">
                    <input class="form-control" [(ngModel)]="loginService.rememberMe" type="checkbox" name="rememberMe" value="true" />{{"RememberMe" | localize}}
                    <span></span>
                </label>
            </div>
            <div class="col m--align-right">
                <a routerLink="/account/forgot-password" id="forget-password" class="m-link forget-password">{{"ForgotPassword" | localize}}</a>
            </div>
        </div>

        <div class="m-login__form-action">
            <button type="submit" class="btn btn-primary m-btn m-btn--pill m-btn--custom m-btn--air" [disabled]="!loginForm.form.valid">{{"LogIn" | localize}}</button>
        </div>
    </form>

    <div class="login-options" *ngIf="(multiTenancySideIsTeanant || !isMultiTenancyEnabled) && loginService.externalLoginProviders.length > 0">
        <h4>{{"LoginWith" | localize}}</h4>
        <ul class="social-icons">
            <li *ngFor="let provider of loginService.externalLoginProviders">
                <a class="social-login-icon social-icon-color {{provider.icon}}"
                   (click)="externalLogin(provider)"
                   title="{{provider.name}}"></a>
            </li>
        </ul>
    </div>

    <div class="m-stack__item m-stack__item--center">
        <div class="m-login__account">
            <span *ngIf="isSelfRegistrationAllowed">
                <a routerLink="/account/register" id="register-btn" class="m-link m-link--primary m-login__account-link">{{"CreateAnAccount" | localize}}</a>
                <span class="pipe-divider"> | </span>
            </span>
            <span *ngIf="!multiTenancySideIsTeanant && isTenantSelfRegistrationAllowed">
                <a routerLink="/account/select-edition" id="register-btn" class="m-link m-link--primary m-login__account-link">{{"NewTenant" | localize}}</a>
                <span class="pipe-divider"> | </span>
            </span>
            <a routerLink="/account/email-activation" id="email-activation-btn" class="m-link m-link--primary m-login__account-link">{{"EmailActivation" | localize}}</a>
        </div>
    </div>
</div>
